<!--
 * @Author: cjj
 * @Date: 2024-11-18 10:37:22
 * @LastEditors: cjj
 * @LastEditTime: 2024-11-19 10:12:59
 * @Description: 2901545842@qq.com
-->

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getScore } from '@/api/exchange';
import { exchangeStore } from '@/stores/exchange';
const exchange = exchangeStore()
const router = useRouter()
const showruler = ref(false)
const meters = ref()
onMounted(() => {
  getScore().then(res => {
    meters.value = res.data
  })
})
</script>

<template>
    <div class="box">
        <div class="header">
            <p class="title">兑换中心</p>
            <span class="back"><van-icon name="arrow-left" /></span>
            <div class="distance">
                <h3>{{ meters }} <span>公里</span></h3>
                <p class="desc">您有200公里将于12月31日过期</p>
                <span @click="showruler = true" class="s1">兑换规则</span>
            </div>
            <van-overlay :show="showruler" >
                <div class="ruler">
                    <img class="img1" src="https://cdn7.axureshop.com/demo/1972680/images/%E9%87%8C%E7%A8%8B%E5%85%91%E7%8E%B0%E9%87%91/u3920.svg" alt="">
                    <img class="img2" src="https://cdn7.axureshop.com/demo/1972680/images/%E9%87%8C%E7%A8%8B%E5%85%91%E7%8E%B0%E9%87%91/u3921.svg" alt="">
                    <p class="p1">兑换规则</p>
                    <div class="ruler-content">
                        <p>1. 兑换规则兑换规则兑换规则。</p>
                        <span>说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容。</span>
                        <p>2. 兑换规则兑换规则兑换规则兑换规则</p>
                        <span>说明内容说明内容说明内容说明内容。</span>
                        <p>3. 兑换规则兑换规则兑换规则兑换规则兑换规则兑换规则？</p>
                        <span>说明内容说明内容说明内容说明内容说明内容说明内容说明内容。</span>
                    </div>
                    <van-button @click="showruler = false">我知道了</van-button>
                </div>
            </van-overlay>
        </div>
        <div class="content">
            <div class="head">
                <div class="img"><van-icon name="cash-back-record" /></div>
                <div>
                    <p>里程换现金</p>
                    <span>里程也能兑换现金啦~</span>
                </div>
                <van-button @click="router.push('/confirmscore')" round  type="primary">立即兑换</van-button>
            </div>
            <div class="center">
                <van-tabs title-active-color="#fd7851">
                    <van-tab title="里程公里数">
                        <div class="list" v-for="item in 10">
                            <p>2023/04/06 <span>+100</span></p>
                        </div>
                    </van-tab>
                    <van-tab title="兑换记录">
                        <div class="list" v-for="item in exchange.meters">
                            <p>{{ item.time }} <span>-{{ item.score }}</span></p>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .header {
        font-size: 18px;
        color: #fff;
        position: relative;
        background-color: rgba(22, 120, 255, 1);

        .title {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .back {
            position: absolute;
            top: 10px;
            left: 20px;
            font-size: 25px;
        }

        .distance {
            height: 150px;
            padding: 15px;
            box-sizing: border-box;
            position: relative;

            h3 {
                font-weight: 500;
                font-size: 40px;

                span {
                    margin-top: 10px;
                    font-size: 20px;
                }
            }

            p {
                margin-top: 10px;
                font-size: 14px;
            }

            .s1 {
                position: absolute;
                right: 15px;
                top: 15px;
                color: #ccc;
                font-size: 14px;
            }
        }
    }

    .content {
        height: calc(100% - 200px);
        // background-color: #fcf2f2;
        position: relative;
        border: 1px solid transparent;
        box-sizing: border-box;

        .head {
            position: absolute;
            width: 91%;
            height: 80px;
            top: -40px;
            left: 15px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0px 0px 16px rgba(226, 238, 255, 0.988235294117647);
            display: flex;
            padding: 0 15px;
            box-sizing: border-box;
            align-items: center;
            justify-content: space-between;

            .img {
                width: 50px;
                font-size: 35px;
                color: white;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                background-color: #fd7851;
            }

            div {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            p {
                font-size: 14px;
            }

            span {
                
                font-size: 12px;
                color: #999;
            }

            .van-button {
                color: #000;
                font-size: 14px;
                width: 100px;
                border: none;
                height: 30px;
                color: #fff;
                margin-left: 15px;
            }
        }

        .center {
            width: 91%;
            margin-left: 15px;
            height: 320px;
            overflow: auto;
            margin-top: 60px;
            box-shadow: 0px 0px 16px rgba(226, 238, 255, 0.988235294117647);


            .list {
                font-size: 14px;
                height: 50px;
                display: flex;

                p {
                    width: 100%;
                    padding: 0 15px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }


            }
        }
    }
    //规则样式
    .ruler {
        width: 70%;
        height: 3.5rem;
        position: fixed;
        box-sizing: border-box;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        color: #000;
        border: 5px solid rgba(22, 120, 255, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        z-index: 666;
        box-sizing: border-box;
        padding: 0 15px;
        position: relative;
        border-radius: 15px;
        .p1{
            font-size: 18px;
            margin-top: 30px;
            margin-bottom: 10px;
        }
        .ruler-content{
            font-size: 0.12rem;
           border-radius: 10px;
            box-sizing: border-box;
            background-color:#f1f1f1;
            p{
                margin-top: 10px;
            }
            span{
                display: inline-block;
                 margin-bottom: 15px;
                color: #999;
            }
        }
        .van-button{
                background-color: rgba(22, 120, 255, 1); 
                color: #fff;
                width: 150px;
                margin-top: 10px;
                height: 40px;
            }
            .img1{
                position: absolute;
                top: -30px;
            }
            .img2{
                position: absolute;
                top: -18px;
            }
    }
}
.van-tabs__line{
    z-index: -1;
}
</style>